<style>
     caption {
            font-size: 20px;
            font-weight: bold;
        }

        html {
            overflow: hidden;
        }
        .z1css{
            background-color: black;
            position: fixed;
            width: 100%;
            height: 100%;
            right: 0;
            top: 0;
            z-index: 99999999;
        }
        .tabcss{
            height: 100%;
            background-color: black;
        }
        .table1>tbody>tr:nth-child(1)>td:nth-child(1),
        .table1>tbody>tr:nth-child(2)>td:nth-child(1),
        .table1>tbody>tr:nth-child(4)>td:nth-child(1),
        .table1>tbody>tr:nth-child(3)>td:nth-child(1){
            font-size:32px;
            font-weight:bold;
            /*重点标红区域*/
        }
        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 0px;
            line-height: 1.42857143;
            font-size: 32px;
            vertical-align: top;
            border-top: 1px solid #dd0d1e;
            line-height: 52px;
        }
  }
</style>


<div class="page-content1 tabcss" style="margin-left:0;">
  <div style="width: 99%;margin: 0 auto;border: 3px solid red;overflow: scroll;height:99%;overflow: hidden">
    <table class="table table1 table-bordered"
      style="background-color: black;color: red; border-color: red;font-size:25px;border: 1px  solid red;position: relative;top: 1px;border-bottom: 3px solid red;width: 100%">
      <caption style="background-color: black;color: red;border-color: red; font-size:35px;">
        区域人数实时统计表</caption>
      <thead style="background-color: black;color: red;border-color: red;">
        <thead >
          <tr>
            <td colspan="6" id="timer"
              style="background-color: black;color: red;border-color: red;height: 40px;text-align:center;font-size:30px;border-bottom: 3px solid red;">
              2018-05-03 星期四 13:51:43</td>
          </tr>
          <tr>
            <th style='background-color: black;color: red;border-color: red;font-size:35px;height: 55px'>
              区域</th>
            <th style='background-color: black;color: red;border-color: red;font-size:35px;height: 55px'>
              人数</th>
            <th style='background-color: black;color: red;border-color: red;font-size:35px;height: 55px'>
              区域</th>
            <th style='background-color: black;color: red;border-color: red;font-size:35px;height: 55px'>
              人数</th>
            <th style='background-color: black;color: red;border-color: red;font-size:35px;height: 55px'>
              区域</th>
            <th style='background-color: black;color: red;border-color: red;font-size:35px;height: 55px'>
              人数</th>
          </tr>
<!--           <tr>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
          </tr>
          <tr>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
          </tr>
          <tr>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
          </tr>
          <tr>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
            <td class="contentTd">测试</td>
          </tr> -->
        </thead>
      <tbody>
      </tbody>
    </table>

    <table class="table table-bordered"
      style="background-color: black;color: red;margin-top:50px;font-size:30px;width:97%;margin:50px auto;border:none">
      <!--<caption style="background-color: black;color: red;">车间人数分布</caption>-->
      <tr style="font-size: 45px;font-weight: bold">
        <td style="text-align:right;width: 30%;border:none;line-height: 93px;">总人数（人）：</td>
        <td id="znum" style="line-height: 80px;border:none"></td>

        <td style="line-height: 80px;text-align:right;border:none">室内人数（人）：</td>
        <td id="cjnum" style="line-height: 80px;border:none"></td>

      </tr>
      <tr style="font-weight: bold">
        <td style="line-height: 80px;text-align:right;width: 30%;border:none;">室外人数（人）：</td>
        <td id="lmnum" style="line-height: 80px;border:none"></td>
        <td style="text-align:right;border:none">其他人数（人）：</td>
        <td id="wxnum" style="border:none">0</td>
      </tr>
      <tr style="display: none;">
        <td style="text-align:right;border:none">休班人数（人）：</td>
        <td id="xbnum" style="border:none">20</td>

        <td style="text-align:right;border:none"></td>
        <td id="" style="border:none"></td>

        <td style="text-align:right;border:none">外协人数（人）：</td>
        <td id="wxnum2" style="border:none">0</td>
      </tr>
    </table>
  </div>

</div>

<script type="text/javascript">
$('#sidebar_style').hide()
var url='realtime_attendance'
var now
var startIndex = 0;
var pagingTimer;
time()

function time() {

    function p(s) {
        return s < 10 ? '0' + s : s;
    }

    var myDate = new Date();
    //获取当前年
    var year = myDate.getFullYear();
    //获取当前月
    var month = myDate.getMonth() + 1;
    //获取当前日
    var date = myDate.getDate();
    var h = myDate.getHours();       //获取当前小时数(0-23)
    var m = myDate.getMinutes();     //获取当前分钟数(0-59)
    var s = myDate.getSeconds();

    var l = ["日", "一", "二", "三", "四", "五", "六"];
    var d = new Date().getDay();
    //var str = "今天是星期" + l[d];

    now = year + '-' + p(month) + "-" + p(date) + " " + '星期' + l[d] + " " + p(h) + ':' + p(m) + ":" + p(s);
    $('#timer').html(now)
}
setInterval('time()',1000)
var z1 = true;
$('.layui-body').attr('style','padding:0px;bottom:0px;top:60px;left:0px') 
$(".page-content1").dblclick(function () {
    if (z1) {
        $('.layui-body').attr('style','padding:0px;bottom:0px;top:0px;left:0px') 
        $('.layui-side').hide()
        $('.layui-footer').hide()
        $('.layui-header').hide()
        z1=false   
    } else {
        $('.layui-body').attr('style','padding:0px;bottom:0px;top:60px;left:0px') 
        $('.layui-side').show()
        $('.layui-footer').hide()
        $('.layui-header').show()
        z1 = true;
    }

})




  function initData(res) {
    console.log(res)
    var building_data=res.building
    var person_data=res.person
    var total_num=person_data.length
    console.log(total_num)
    var inroom_num=0,outroom_num=0;
    var inroom_detail={}
    var outroom_detial;
    for(var i=0;i<building_data.length;i++){
      inroom_detail[building_data[i]['name']]=[]
    }
    
    for(var i=0;i<device.length;i++){
      if(device[i]['location'] in inroom_detail){
        inroom_detail[device[i]['location']].push(device[i])
        inroom_num=inroom_num+1
      }
    }
    console.log(inroom_detail)
    for(var k in inroom_detail){
      for(var i=0;i<building_data.length;i++){
          if(k==building_data[i]['name']){
              building_data[i]['room_quantity']=inroom_detail[k].length
          }
      }
    }

    console.log(building_data)
    outroom_num=total_num-inroom_num

  $('.table1>tbody').empty();
  var data=building_data
  var content = '';
  for(var i=0;i<data.length;i++){
      content +="<tr>"
      content +='<td style="border-color: red;text-align:center;">'+data[i]['name']+'</td>'
      content +='<td style="border-color: red;text-align:center;">'+data[i]['room_quantity']+ '（人）</td>'

      var sName = "";
      var sCount = "";
      if (++i < data.length){
          sName = data[i]['name'];
          sCount = data[i]['room_quantity'] + "（人）";
      }
      content +='<td style="border-color: red;text-align:center;">'+sName+'</td>'
      content +='<td style="border-color: red;text-align:center;">'+sCount+ '</td>'

      sName = "";
      sCount = "";
      if (++i < data.length){
          sName = data[i]['name'];
          sCount = data[i]['room_quantity'] + "（人）";
      }
      content +='<td style="border-color: red;text-align:center;">'+sName+'</td>'
      content +='<td style="border-color: red;text-align:center;">'+sCount+ '</td>'
      content +="</tr>"
  }
  $('.table1>tbody').append(content);

  //人数统计
   var inroom_all=inroom_num
   var outroom_all=outroom_num
   // var person_kind=new_data['person_kind']
   var people_count=total_num
  $('#znum').html(people_count);
  $('#cjnum').html(inroom_all);
  $('#lmnum').html(outroom_all);
  // $('#wxnum').html(person_kind['temp'].length);
}


get_info_ajax(url,'refresh_data',initData)

  
</script>
